<template>
  <div class="invoice-main">
    <div class="invoice-top">
      <div class="invoice-part">
        <div class="dot-common"></div>
        <span>可开票金额</span>
      </div>
      <div class="invoice-part"><span>总计可开票金额</span></div>
      <div class="invoice-part">
        <span>已开票金额</span>
        <div class="button thumb">立即开票</div>
      </div>
    </div>

    <div class="dir"></div>

    <div class="invoice-second">
      <div class="part">￥{{ twoFixed(200000) }}</div>
      <div class="part">=</div>
      <div class="part">￥{{ twoFixed(1000000) }}</div>
      <div class="part">-</div>
      <div class="part">￥{{ twoFixed(800000) }}</div>
    </div>

    <div class="invoice-third">
      <div class="top">
        <div class="dot-common"></div>
        <span>发票信息</span>
      </div>
      <div class="dir"></div>

      <div class="content">
        <div class="left-part">
          <div class="line">
            <div class="title overOne">抬头:中山市天凯网络科技有限公司</div>
            <span class="thumb" title="编辑">编辑</span>
          </div>
          <div class="line">
            <div class="title overOne">税号: 91442000MA4X2PUY2J</div>
            <span class="thumb" title="编辑">编辑</span>
          </div>
        </div>
        <div class="right-part">
          <div class="line">
            <div class="title overOne">
              邮寄地址:广东省中山市火炬开发区凯芮新城淘金街12区雅湖居b6栋805
            </div>
            <div class="thumb editor-text" title="编辑">编辑</div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-box">
      <Balance
        :showTitle="true"
        :showColumn="false"
        :showSearch="false"
        title="开票明细记录"
      >
      </Balance>

      <div class="table-container">
        <Table
          :topCss="{
            background: '#f5f8fe',
            height: '.3042rem',
            fontSize: '.0893rem',
          }"
          :tdCss="{
            fontSize: '.07rem',
            padding: '.04rem',
          }"
          :lineCss="{
            height: `.2188rem`,
            background: '#f5f8fe',
          }"
          :borderSpacing="`0 .0729rem`"
          headerFamily="PuHuiMedium"
          :dataSource="invoiceData"
          :headerFontSize="`400`"
          :column="column"
        >
      <template #amount="{row}"><span class="amount">￥{{ twoFixed(row.amount)  }}</span></template>
    </Table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { twoFixed } from "@/utils/util";
import Balance from "@/components/Balance/index.vue";
import Table, { Column } from "@/components/Table";
import  invoiceData from "@/json/invoice.json";

const column = ref<Array<Column>>([
  {
    title: "发票金额",
    dataKey: "amount",
    width: 200,
    align: "center",
    slotName:"amount"
  },
  { title: "抬头信息", dataKey: "header", width: 180, align: "center" },
  {
    title: "信用代码",
    dataKey: "credit",
    width: 180,
    align: "center",
  },
  {
    title: "银行代码",
    dataKey: "bank_code",
    width: 180,
    align: "center",
  },
  {
    title: "注册信息",
    dataKey: "register",
    width: 180,
    align: "center",
  },
  {
    title: "电子邮件",
    dataKey: "e_mail",
    width: 180,
    align: "center",
  },
  {
    title: "发票凭证",
    dataKey: "voucher",
    width: 180,
    align: "center",
  },
  {
    title: "时间",
    dataKey: "time",
    width: 180,
    align: "center",
  }
]);
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
